<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/lcs-mui-numbox.css"/>
		<style type="text/css">
			
.checklist{
				background-color: white !important;
				border-radius: 0.5em;
				margin: 5px auto;
				padding: 10px;
			}
			.flex1{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}
			.left{
				width: 25%;
				
			}
			.left>img{
				/*width: 100%;
				height: 100%;*/
				width: calc(25vw);
				height: calc(25vw);
				border-radius:50% ;
			}
			.right{
				padding-left:1em ;
				width: 80%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				color: #676664;
				
			}
			.right>div{
				padding: 0.2em;
				
			}
			.flexrowbetween{
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
			}
			.content{
				width: 100%;
				background-color: white;
				padding: 0.5em;
			}
			
			.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    padding: 11px 15px;
			 	text-align: right;
			}
			.mui-input-row .mui-btn {
			    float: right;
			    width: 60%;
			    padding: 11px 15px;
			}
			.dlkg{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	/*padding: 0.5em 0.5em;*/
    }
    .dlkg>.mui-input-row,.dlkg>div{
    	width: 50%;
    }
   .mui-input-row label~input{
    float: right;
    width: 50%;
    margin-bottom: 0;
    padding-left: 0;
    border: 0;
}

 .flex-row-between{
 	padding: 5px 15px;
 }
   
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">添加预约</h1>
		</header>
		<div class="mui-content">
		    <div class="checklist" id="memberid">
		    	    	<div class="flex1">
		    	    		<div class="left">
		    	    			
		    	    		</div>
		    	    		<div class="right">
		    	    			<div class="flexrowbetween">
		    	    				<span id="">
		    	    					
		    	    				</span>
		    	    				<span class="fe07">
		    	    					
		    	    				</span>
		    	    			</div>
		    	    			<div id="" class="fe07">
		    	    				
		    	    			</div>
		    	    			<div id="" class="fe07">
		    	    				
		    	    			</div>
		    	    		</div>
		    	    	</div>
		    	</div>
		    
		    <div class="content">
		    	<div class="mui-input-row border-b fe09" >
		    			<label class="wsnowrap">预约消费项目</label>
			    		<div class="place items" >
						    <button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">请选择</button>
						</div>
		    	</div>
		    	<div class="mui-input-row border-b fe09" >
		    			<label class="wsnowrap">预约日期</label>
			    		<div class="place items" >
						    <button id='birthday' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">请选择</button>
						</div>
		    	</div>
		    	
		    	<div class="mui-input-row border-b fe09" >
		    			<label class="wsnowrap">预约时间</label>
			    		<div class="place items" >
						    <button id='reservationtime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">请选择</button>
						</div>
		    	</div>
		    	
		    	<div class="dlkg border-b" >
		    		<div class="flex-row-between fe09" >
		    			<div class="wsnowrap">数量</div>
		    			<!--
                        	作者：592176224@qq.com
                        	时间：2019-01-29
                        	描述：
			    		<input type="number" name="" id="" placeholder="1" value="" />
                        -->
                        <div class="mui-numbox" data-numbox-step="1" data-numbox-min='1' data-numbox-max="100">
                            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                            <input id="goodsnumsid" class="mui-input-numbox" type="number" />
                            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                        </div>
		    		</div>
		    		<div class="textr fe08 padright1" id="goodsdiv">
		    			合计金额:0.00
		    		</div>
		    	</div>
                
		    	<div class="mui-input-row border-b fe09" >
		    			<label class="wsnowrap">员工</label>
			    		<div class="place items" >
						    <button id='memid' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">请选择</button>
						</div>
		    	</div>
		    	<div class="dlkg padlabel border-b" id="memdiv">
		    		<div class="fe09">
		    			姓名：<span id="memname" data-mid="0"></span>
		    		</div>
		    		<div class="textr fe09">
		    			手机:<span id="memphone"></span> 13622222222
		    		</div>
		    	</div>
		    	<div class="mui-input-row">
		    	    <label class="fe09">备注：</label>
		    	    <input id="remark" type="text" class="textr" placeholder="请输入备注">
		    	</div>
		    	
		    </div>
		    
		    <div class="footgd"></div>
		    <div class="footdiv" id="footdivid">
		    	<button id="subbut" type="button" class="mui-btn mui-btn-blue mui-btn-block">确认预约</button>
		    </div>
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var goodsprice2 = 0,
			mid=0,
			gid=0,
			ygid=0,
			goodsid=0,
			goodsname="",
			goodsnums=1,
			goodsprice=0,
			phone="",
			time_id = 0,	//时间段id
			username="";
			window.onload = function(){
				mui.init();
				mid = getrequest().mid||0;
				mui.plusReady(function(){
					mid	= plus.webview.currentWebview().mid||0;
				})
				getmember();
				setaddEventListener();
				
				//监听预约时间
				g("reservationtime").addEventListener("tap",function(){
					var birthday = g('birthday');
					var bvalue = birthday.innerHTML=="请选择"?"":birthday.innerHTML;
					if("" == bvalue){
						mui.toast("请选择预约时间")
						return;
					}
					reservationtime(bvalue);
				})
				
				
				
				var subbut = g("subbut");
						subbut.addEventListener("tap",function(e){
							var birthday = g('birthday');
							var bvalue = birthday.innerHTML=="请选择"?"":birthday.innerHTML;
							if("" == bvalue){
								mui.toast("请选择预约时间")
								return;
							}
							if(time_id == 0){
								mui.toast("请选择预约时间段")
								return;
							}
	                		var data = {
	                			url:"/api/appointment/add",
	                			data:{
	                				access_token:acctoken(),
	                				member_id:g("memname").dataset.mid,
	                				username:g("memname").innerHTML,
	                				phone:g("memphone").innerHTML,
	                				product_id:goodsid,
	                				appointment_time:bvalue,
	                				time_id:time_id,
	                				count: g("goodsnumsid").value||1,
	                				money: (goodsprice*goodsnums).toFixed(2),
	                				employee_id:ygid,
	                				remark:g("remark").value,
	                			}
	                		}
	                		ajax(data,function(res){
	                			console.log(res);
	                			mui.toast(res.msg);
	                			back_show_num();
	                		})
	                	})
			}
			
			
			function reservationtime(time){
				var data = {
					url:"/api/appointment/get_surplus_time",
					data:{
						access_token:acctoken(),
						appointment_time:time,
					}
				}
				ajax(data,function(res){
					console.log(res);
					if(res.data.length>0){
						var list = [];
						res.data.forEach(function(item,index){
							var str = {value:item.id,text:item.start_time +' ~ ' +item.end_time + '(剩余'+ item.surplus_count+'次)'}
							list.push(str);
						})
						var levelPicker = new mui.PopPicker();
		                levelPicker.setData(list);
		                var reservationtimeval = document.getElementById('reservationtime');
	                    levelPicker.show(function(items) {
	                        reservationtimeval.innerText = items[0].text;
	                        time_id = items[0].value;
	                        //返回 false 可以阻止选择框的关闭
	                        //return false;
	                    });
					}
					
				})
				
			}
			
			function setaddEventListener(){
						var birthday = g('birthday');
						var datajson = get_time();
                		birthday.addEventListener('tap', function(event) {
                			var birthdayPicker = new mui.DtPicker({
			                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
			                    beginDate: new Date(datajson.Y, datajson.M-1,datajson.D),//设置开始日期   
			                    endDate: new Date(datajson.Y, datajson.M, datajson.D),//设置结束日期    //真正的是10.21
			                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
	                		})
		                    birthdayPicker.show(function(e) {
		                    	 birthday.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
		                    	 reservationtime(birthday.innerText);
		                    });
	                	}, false);
	                	var data2 = {
						url:"/api/employee/lst",
						data:{access_token:acctoken(),type:1,is_appointment:1}
					}
					ajax(data2,function(res){
						console.log("员工列表",res);
						var list1 = [];
						for(var i = 0; i < res.data.data.length; i++){
							var str = {value:res.data.data[i].id,text:res.data.data[i].username}
							list1.push(str);
						}
						var memidPicker = new mui.PopPicker();
		                memidPicker.setData(list1);
		                var memid = g('memid');
		                memid.addEventListener('tap', function(event) {
		                    memidPicker.show(function(items) {
		                        memid.innerText = items[0].text;
		                        ygid = items[0].value;
		                    });
		                }, false);
					})
	                	
	                	
	                	
	                	var level = g("level");
	                	level.addEventListener("tap",function(e){
	                		var list = {
		                         pageid:"addBookingDetails",
		                         returnfun:"setservice"
		            		}
	                		mui.openWindow({
	                			url:'service-list.html?list='+list,
	                			id:'service-list',
	                			extras: list
	                		})
	                		
	                	})
	                	
					}
			function getmember(){
						var data = {
							url:"/api/member/detail",
							data:{
								access_token:acctoken(),
								id:mid
							}
						}
						ajax(data,function(res){
							console.log("单个会员信息",res)
							setmember(res.data);
							phone = res.data.phone;
		    				username = res.data.username;
							
						})
					}
			
					function setmember(data){
						var str = '<div class="flex1"><div class="left">';
				    			if(data.images&&data.images.path_name){
		    						str += '<img class="border50" src="'+data.images.path_name+'">';
				    			}else{
				    				str += '<img class="border50" src="../../img/member-header.png"/>';
				    			}
				    	    	str += '</div>'+
				    	    	'<div class="right"><div class="flexrowbetween"><span id="">'+
				    	    	data.username +
				    	    	'</span><span class="fe07">'+
				    	    	'消费：0次 '+
				    	    	'</span></div><div id="" class="fe07">';
				    	    	if(data.member_level){
				    	    		str += data.member_level.member_level ;
				    	    	}
				    	    	str += ' | 消费时间：'+data.editor_time +
				    	    	'</div><div id="" class="fe07">'+
				    	    	'余额：'+ data.stay_money+'元'+
				    	    	'</div></div></div>';
				    	var str2 = '<div class="fe09">姓名：<span id="memname" data-mid="'+data.id+'">'+
				    	data.username +
		    			'</span></div><div class="textr fe09">手机:<span id="memphone">'+
		    			data.phone+
		    			'</span></div>';
				    	g("memberid").innerHTML = str;  
				    	g("memdiv").innerHTML = str2;
				}
			window.addEventListener("setservice",setservice);
			function setservice(e){
						goodsid = e.detail.gid
						goodsname = e.detail.gname;
						goodsprice	= e.detail.gprice;
						g("level").innerHTML = goodsname;
						g("goodsdiv").innerHTML = "合计金额：￥"+ goodsprice;
						var goodsnumsid = g("goodsnumsid");
						var goodsdiv = g("goodsdiv");
						goodsnumsid.addEventListener("change",function(e){
	                		console.log(this.value);
	                		that.goodsnums = this.value;
	                		console.log(goodsprice);
	                		console.log((goodsnums*goodsprice).toFixed(2));
	                		goodsdiv.innerHTML = "合计金额：￥"+ (goodsnums*goodsprice).toFixed(2);
	                	})
						//g("footdivid").innerHTML = '<button id="subbut" type="button" class="mui-btn mui-btn-blue mui-btn-block">确认预约</button>';
						
					}
		</script>
	</body>

</html>